import Taro, { Component, Config } from '@tarojs/taro'
import {View, Input, Button, Text, Image} from '@tarojs/components'
import {observer, inject} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, ServerHost, companyName} from '../../utils/common'

import './login.less'
import eye from "../../assets/img/icon_eye.png";
import eye_on from "../../assets/img/icon_eye_on.png";


interface IHomeProps extends IStoreProps {}

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Login extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

  state = {
    currentEye: false,
    eyeImg: eye,
    focus: 'userPhoneNumber',
    //userPhoneNumber: '13629439834',
    userPhoneNumber: null,
    //password: '123456',
    password: null,
    isComplete: true,
    passwordType: 'password'
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '登录'})
  }

  componentDidHide(): void {
  }

  handelRouter(url: string = '/pages/index/index') {
    getRuntime().navigateTo(url)
  }

  // input聚焦
  inputFocus (type: string = 'phoneNumber') {
    this.setState({
      focus: type
    })
  }

  toggleEye () {
    this.setState({
      currentEye: !this.state.currentEye
    }, () => {
      let  eyeImg = this.state.currentEye ? eye_on : eye
      let  passwordType = this.state.currentEye ? 'text' : 'password'
      this.setState({
        eyeImg,
        passwordType
      })
    })
  }

  inputUserPhoneNumberChange (e) {
    let userPhoneNumber = e.detail.value
    this.setState({
      userPhoneNumber
    })
  }

  inputPasswordChange (e) {
    let password = e.detail.value
    this.setState({
      password
    })
  }

  handelSubmit () {
    const { userStore } = this.props.stores
    let { userPhoneNumber, password } = this.state
    if(!userPhoneNumber){
      getRuntime().showToast('用户名不能为空~')
      return
    }
    if(!password){
      getRuntime().showToast('密码不能为空~')
      return;
    }
    userStore.userLogin({
      form: {
        userPhoneNumber,
        password
      },
      callback: (res) => {
        // 获取用户授权
        let now = new Date()
        let nowTime = now.getTime()
        let expireTime = now.setTime(nowTime + 5 * 24 * 24 * 24 * 1000)
        res.expireTime = expireTime.getTime()
        getRuntime().setUserInfo(res);
        let url = ServerHost+'/api/Account/GetWechatCode'
        window.location.href = url
      }
    })
  }

  onceLogin() {
    let url = ServerHost+'/api/Account/GetWechatCode'
    window.location.href = url
  }


  render () {
    let { eyeImg, focus, isComplete, passwordType, userPhoneNumber,password } = this.state
    if(userPhoneNumber && password){
      isComplete = false // 禁用取消
    }
    return (
      <View className='login-wrap'>
       <View>
         <Text className={'title'}>欢迎您登录{companyName}</Text>
         <View className={focus === 'userPhoneNumber' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>手机号</Text>
           <Input className='input' autoFocus type='number' placeholderClass='placeholder-class' placeholder='请输入11位手机号' maxLenght='11'
                  name='userPhoneNumber'
                  onFocus={this.inputFocus.bind(this, 'userPhoneNumber')}
                  onChange={this.inputUserPhoneNumberChange.bind(this)}
           />
         </View>
         <View className={focus === 'password' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>密码</Text>
           <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={passwordType}
                  name='password'
                  onFocus={this.inputFocus.bind(this, 'password')}
                  onChange={this.inputPasswordChange.bind(this)}
           />
           <Image className='eye' src={eyeImg} onClick={this.toggleEye.bind(this)} />
         </View>

         <Button className={isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on'} type='default' disabled={isComplete}
          onClick={this.onceLogin.bind(this)}
         >立即登录</Button>
       </View>

        <View className='protocol'>
          <Text onClick={this.handelRouter.bind(this, '/pages/login/forgetPassword')}>忘记密码</Text>
          <Text className='split color-dark'>|</Text>
          <Text className='protocol-text' onClick={this.handelRouter.bind(this, '/pages/login/registerStepOne')}> 新用户注册 </Text>
        </View>
      </View>
    )
  }
}

export default Login
